<template>

	<scroll-view scroll-y style="height: 100%;width: 100%; background-color: #fff;" @scrolltolower="reachBottom">
		
		
		<!-- 菜单 -->
		<view class="menu">

			<view v-for="(item,index) in menuList" :key="index" class="menu_item">

				<view class="menu_item_content">

					<image class="menu_item_image" :src="item.pic"
						mode="aspectFill" style="width: 20rpx;height: 20rpx;"></image>

					<view class="menu_item_title u-p-t-10">{{item.title}}</view>
					<view class="menu_item_info">{{item.des}}</view>

				</view>
			</view>

		</view>

		<!-- 轮播图 -->
		<u-swiper class="bannar u-m-l-20 u-m-r-20" :list="banners" keyName="image" :autoplay="false" circular>
		</u-swiper>

		<view class="u-m-t-20" style="background-color: #F2F2F2;height: 10rpx;"></view>

		<!-- 工具菜单 -->
		<view class="tool_menu">
			<swiper class="tool_menu_swiper" @change="change" style="height: 315rpx;">
				<swiper-item v-for="(tool_menu_list,index) in toolMenuList" :key="index">
					<u-grid :col="5" @click="click" hover-class="hover-class" :border="false">
						<u-grid-item v-for="(tool_menu_item, tool_menu_list_index) in tool_menu_list"
							:index="tool_menu_list_index" :key="tool_menu_list_index"
							:custom-style="{padding:'25rpx 10rpx 0rpx 10rpx'}">
							<!-- <view style="background-color: #2979FF;width: 100%;height: 80rpx;"></view> -->
							<!-- aspectFill -->
							<image class="menu_item_image" :src="tool_menu_item.pic"
								mode="aspectFit" style="width:100%;height: 80rpx"></image>
							<text class="grid-text">{{ tool_menu_item.title }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<view v-for="(tool_menu_list,index) in toolMenuList" :key="index" class="indicator-dots-item"
					:class="[current == index ? 'indicator-dots-active' : '']"></view>
				<!-- <view class="indicator-dots-item" :class="[current == 0 ? 'indicator-dots-active' : '']">
					</view>
					<view class="indicator-dots-item" :class="[current == 1 ? 'indicator-dots-active' : '']">
					</view>
					<view class="indicator-dots-item" :class="[current == 2 ? 'indicator-dots-active' : '']">
					</view> -->
			</view>
		</view>

		<view class="u-m-t-20" style="background-color: #F2F2F2;height: 2rpx;"></view>

		<!-- discover -->
		<view class="discover">

			<view class="discover_item" v-for="(item,index) in discoverList" :key="index">

				<view class="discover_topView u-flex u-row-between">
					<view class="discover_topView_title">{{item.title}}</view>
					<view class="u-flex u-row-right">
						<view class="discover_topView_more">更多</view>
						<image src="../../../../static/icon/icons/arrows-right-gray.png" mode="aspectFill"
							style="height: 25rpx;width: 25rpx;"></image>
					</view>
				</view>

				<view class="u-m-l-10 u-m-r-10">

					<scroll-view class="scroll-view_H" scroll-x="true">

						<image id="demo1" class="scroll-view-item_H" v-for="(imageItem,index) in item.items"
							:key="index" :src="imageItem.pic" mode="aspectFill">

							<!-- <image class="discover_item_image" :src="imageItem" >
									
								</image> -->
						</image>

					</scroll-view>
				</view>

				<view style="background-color: #F2F2F2;height: 10rpx;"></view>

			</view>

		</view>

		<view class="recommend">

			<view class="discover_topView u-flex u-row-between">
				<view class="discover_topView_title">{{recommendList.title}}</view>
				<view class="u-flex u-row-right">
					<view class="discover_topView_more">更多</view>
					<image src="../../../../static/icon/icons/arrows-right-gray.png" mode="aspectFill"
						style="height: 25rpx;width: 25rpx;"></image>
				</view>
			</view>

			<view class="u-m-l-10 u-m-r-10">

				<scroll-view class="scroll-view_H" scroll-x="true" >

					<view class="recommend-item" v-for="(item,index) in recommendList.items" :key="index">

						<view class="recommend-item-coverContent">
							<image class="recommend-item-image" :src="item.pic" mode="aspectFill"></image>
							<view class="recommend-item-tips">{{item.ump_type_s}}</view>
						</view>

						<view class="recommend-item-title u-line-2">{{item.title}}</view>

						<view class="recommend-item-priceContent u-flex">
							<text style="font-size: 36rpx;color: #DD524D;">{{item.price}}</text>
							<text class="u-m-t-5 u-m-l-10"
								style="font-size: 24rpx; color: #909399;text-decoration: line-through;">￥{{item.price_line}}</text>
						</view>

					</view>

				</scroll-view>

			</view>

			<view class="recommend-shop u-flex">
				
				<view class="recommend-shop-content u-flex" v-for="(item,index) in recommendShopList" :key="index">
					<image :src="item.pic" mode="aspectFill"
						style="height: 80rpx;width: 80rpx;"></image>
					<view class="u-p-l-20">
						<view>{{item.title}}</view>
						<view style="font-size: 16rpx;color: #999999;">{{item.des}}</view>
					</view>
				</view>
				
				<!-- <view class="recommend-shop-content u-flex">
					<image src="../../../../static/icon/tabbar_icon/tabbar_icon_forum_sel.png" mode="aspectFill"
						style="height: 80rpx;width: 80rpx;"></image>
					<view class="u-p-l-20">
						<view>肯德基5折点餐</view>
						<view style="font-size: 16rpx;color: #999999;">上快乐网</view>
					</view>
				</view> -->
			</view>

		</view>

		<view class="u-m-t-20" style="background-color: #F2F2F2;height: 10rpx;"></view>

		<view class="listContent">

			<view class="list-item" v-for="(item,index) in list" :key="index" @click="clkickNewsItem(item)" :style=" 'height:' + item.itemHeight + 'rpx'">

				<view class="list-item-content u-flex u-col-top" >

					<view class="list-item-titleContent">

						<!-- 标题 -->
						<view class="u-line-3 u-font-32">{{ item._type !='pic_ad'? item.title : item.show_title}}</view>
						
						<!-- 当时广告的时候显示 -->
						<template v-if="item._type =='pic_ad'">
							<image class="u-m-t-15" mode="widthFix" :src="item.pic" style="width: 100%;"></image>
						</template>
						
						<!-- 当时多张图片的时候显示 -->
						<template v-if="item.morePic">
							
							<view class="u-flex"   style="width: 100%;height: 150rpx;margin-top: 20rpx;">
								
								<image v-for="(imageItem,index) in item.pics_arr" :key="index" class="u-m-t-15" :src="imageItem.tburl" mode="a"  style="height: 100%;width: 100%; background-color: #2B85E4;margin: 10rpx;"></image>

							</view>
							
						</template>
						
						<!-- ；来源 广告时，不显示 -->
						<template v-if="item._type !='pic_ad'">
							<view class="list-item-bottom u-flex u-row-between">
								<view style="font-size: 16rpx;color: #999999;">
									{{item.from}}
								</view>
								<image v-if="item.mateLable" mode="aspectFill" :src="item.label" style="width: 64rpx;height: 30rpx;"></image>
							</view>
						</template>
					</view>
					
					<!-- 单张图片的时候 -->
					<template v-if="item.singlePic">
						<image class="u-m-l-20" mode="aspectFill" :src="item.pic" style="width: 380rpx;height: 175rpx;"></image>
					</template>
					
				</view>

				<view class="u-m-t-20" style="background-color: #f2f2f2;height: 1px;"></view>

			</view>
		</view>

	</scroll-view>


	<!-- </view> -->
</template>

<script>
	
	import {
		home_recommend
	} from '../../../../common/api.js';
	
	// import getJsonData from '../../../../config/api/getDataJson.js'
	import jons from '../../../../config/api/home-recommend.json'
	import articleList from '../../../../config/api/home-recommend-articleList'
	import util from '../../../../common/util.js'
	import test from '../../../../common/test.js'
	
	export default {
		name: "home-recommend",
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		mounted() {
			
			console.log("------")
			
			const res = jons
			console.log(res)
			
			const data = res["data"]
			const operative_config = data["operative_config"]
			
			// 菜单
			const menu = operative_config[0]
			this.menuList = menu.items;
			
			// 轮播图
			/*
			const banner = operative_config[1]
			this.banners = menu.items;
			*/
		   
		   // 工具栏
		   const toolMenuList = operative_config[2].items
		   this.toolMenuList = [];
		   for(var i=0;i<toolMenuList.length;i+=10){
			   
		       this.toolMenuList.push(toolMenuList.slice(i,i+10));
		   }
		   
		   // 发现
		   const disiItems1 = operative_config[3]
		   const disiItems2 = operative_config[4]
		   
		   this.discoverList = []
		   
		   this.discoverList.push(disiItems1);
			this.discoverList.push(disiItems2);
			
			// 推荐1
			const recommendList = operative_config[5];
			this.recommendList = recommendList;
			
			// 推荐2
			const recommendShopList = operative_config[6].items;
			this.recommendShopList = recommendShopList;
			
			// this.getData()
			
			const article = articleList
			
			for (var i = 0 ;i<= article.list.length -1 ; i++){
				
				const item = article.list[i]
				
				// 广告
				if(item._type =='pic_ad'){
					
					item.isAd = true
					item.pic = item.pic_arr[0]['tburl']
					item.itemHeight = "auto"
					
				}else{

					// 单张、多张 
					if(item.pics_arr.length == 1){
						
						item.pic = item.pics_arr[0]['tburl']
						
						item.singlePic = true
						item.itemHeight = "220"
						
					}else{
						
						item.morePic = true
						item.itemHeight = "356"
					}
				}
				
				item.mateLable = util.check_is_img(item.label)
			}
			
			this.list = article.list
		},
		data() {
			return {
				current: 0,
				menuList: [],
				banners: [{
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
					},
					{
						image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
					},
				],

				toolMenuList: [],

				discoverList: [],

				recommendList:{},
				
				recommendShopList:[],

				list: []
			};
		},
		methods: {
			
			change(e) {
				this.current = e.detail.current;
			},
			reachBottom() {
				console.log('9')
			},
			
			async getData(){
				
				const res = await home_recommend()
				console.log("--------")
				console.log(res)
			},
			
			clkickNewsItem(item){
				console.log("11111")
				console.log(item)
				this.$u.route('/pages/testPages/testPages',item)
			}
		},
		computed:{
		
		},
		onReachBottom() {

			console.log('11111111')
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #000;
	}

	.menu {

		padding: 40rpx 0;

		display: flex;
		flex-wrap: wrap;

		background-color: #fff;

		.menu_item {

			margin-left: 12rpx;
			margin-right: 12rpx;
			flex: 1;
			height: 100rpx;
			width: 100%;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 8rpx 2rpx #DCDCDC;

			.menu_item_content {

				height: 100%;

				padding: 0rpx 18rpx;
				position: relative;

				.menu_item_image {
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					width: 30rpx;
					height: 30rpx;
				}

				.menu_item_title {
					font-weight: bold;
					color: #333;
				}

				.menu_item_info {
					font-size: 10rpx;
					color: #999999;
				}
			}
		}
	}

	.tool_menu {

		.grid-text {
			font-size: 28rpx;
			margin-top: 14rpx;
			color: $u-type-info;
		}

		.indicator-dots {

			// margin-top: 1rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.indicator-dots-item {
				background-color: #999;
				height: 6px;
				width: 6px;
				border-radius: 10px;
				margin: 0 3px;
			}

			.indicator-dots-active {
				background-color: #333333;
			}
		}
	}

	.discover {

		.scroll-view-item_H {
			display: inline-block;
			width: 31%;
			height: 330rpx;
			margin: 20rpx 10rpx;
			border-radius: 15rpx;
			background-color: #18B566;
		}
	}

	.discover_topView {

		padding: 15rpx 20rpx 0rpx 20rpx;
	}

	.scroll-view_H {

		white-space: nowrap;
		width: 100%;
	}

	.discover_topView_title {
		font-size: 34rpx;
		font-weight: bold;
	}

	.discover_topView_more {
		font-size: 14rpx;
		color: #666;
	}

	.recommend {

		.recommend-item {

			display: inline-block;
			width: 42%;
			height: 370rpx;
			margin: 20rpx 10rpx;

			// background-color: #18B566;

			.recommend-item-coverContent {

				width: 100%;
				height: 230rpx;
				position: relative;

				.recommend-item-image {

					width: 100%;
					height: 100%;
					border-radius: 15rpx;
					background-color: #DD524D;
				}

				.recommend-item-tips {
					background-color: #333;
					color: #fff;
					position: absolute;
					bottom: 20rpx;
					left: 20rpx;
					padding: 6rpx 10rpx;
					border-radius: 10rpx;
					font-size: 10px;
					opacity: 0.8;
				}
			}

			.recommend-item-title {

				white-space: normal !important;

				word-break: break-all;

				// background-color: #F29100;
				color: #333;
				font-weight: bold;
				padding: 10rpx 0;
			}
		}

		.recommend-shop-content {
			width: 50%;
			height: 100rpx;
			// background-color: #2979FF;
			padding: 0 20rpx;
		}
	}

	.listContent {

		.list-item {
			// height: 226rpx;
			padding: 20rpx 0;
			// background-color: #007AFF;
		}

		.list-item-content {

			height: 100%;
			padding: 0 20rpx;

			.list-item-titleContent {

				width: 100%;
				height: 100%;

				position: relative;

				.list-item-bottom {

					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					width: 100%;
				}
			}
		}


	}
</style>
